<template>
  <div class="detailDialog" :style="{display: props.modelValue ? 'block' : 'none'}">
    <div class="detailBox" >
      <div class="detailBg">
        <div class="detailContent" v-if="props.modelValue">
          {{props.dialogContent}}
        </div>
      </div>
      <img src="/assets/fallow/close.png" alt="" class="closeBtn" @click="emit('update:modelValue')">
    </div>
  </div>
</template>

<script setup>
  const props = defineProps(['modelValue', 'dialogContent'])
  const emit = defineEmits(['update:modelValue'])
</script>

<style scoped>
.detailDialog {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
.detailBox {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80vw;
  height: 80vh;
  backdrop-filter: blur(5px);
  box-shadow: 5px 5px 10px #444444;
  border-radius: 10px;
}
.detailBox .detailBg {
  background-size: 100% 100%;
  width: 120%;
  height: 120%;
  position: absolute;
  top: -10%;
  left: -10%;
  padding: 15vh 15vw;
}
.detailBox .detailBg .detailContent {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,.4);
  color: #ffffff;
  line-height: 1.5;
  border-radius: 10px;
  padding: 5px;
}
.detailBox .closeBtn {
  width: 30px;
  position: absolute;
  top: 5px;
  right: -35px;
  cursor: pointer;
}

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  .detailBg {
    background-image: url("/assets/experience/detail_vertical_border.png");
  }
}
/* 横屏样式 */
@media screen and (orientation: landscape) {
  .detailBg {
    background-image: url("/assets/experience/detail_cross_border.png");
  }
}
</style>